$fColor: cornflowerblue;

*,
*:before,
*:after {
    box-sizing: border-box;
    margin    : 0;
    padding   : 0;
}

h1.lg {
    font-size    : 1em;
    padding      : 0.5em;
    border-bottom: 1px dashed $fColor;
    color        : $fColor;
    cursor       : pointer;
}

h1.lg {
    padding    : 10px 0;
    margin     : 0 20px;
    color      : #797878;
    text-shadow: none;
    position   : relative;

    &::before {
        position          : absolute;
        top               : 0;
        left              : 0;
        overflow          : hidden;
        padding           : 10px 0;
        max-width         : 0;
        border-bottom     : 2px solid #fff;
        color             : #fff;
        content           : attr(data-hover);
        -webkit-transition: max-width 0.5s;
        -moz-transition   : max-width 0.5s;
        transition        : max-width 0.5s;
    }

    &:hover {
        &::before {
            max-width: 100%;
        }
    }
}

.container {
    display    : flex;
    flex-flow  : row nowrap;
    height     : 100vh;
    align-items: stretch;

    .ctrl {
        border-right: 1px dashed $fColor;
        flex        : 400px 0 1;
    }

    .prev {
        flex: 600px 3 1;
    }
}